<template>
	<view class="content">
		<view @click="listBtn" class="image">
			<image src="/static/images/返回.png" mode="aspectFit"></image>
		</view>
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				:style="{width: '750rpx', height: '563rpx'}">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image :src="banner" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="info">
			<view class="title">
				<view class="title_item">
					{{houselistData.region}}·{{houselistData.sector}}区·{{houselistData.addr}}
				</view>
				<image v-if="houselistData.isCollect" @click="handleCollect" src="/static/images/收藏.png" mode="aspectFit">
				</image>
				<image v-else="houselistData.isCollect" @click="handleCollect" src="/static/images/收藏 (1).png" mode="aspectFit">
				</image>
			</view>
			<view class="roomType">
				<view class="roomType_item1">
					{{houselistData.houseType}}
				</view>
				<view class="roomType_item2">
					{{houseType[houselistData.payType]}}
				</view>
			</view>
			<view class="price">
				<view class="price_item">
					<text class="number">￥{{houselistData.rent}}</text>
					<text>/月</text>
				</view>
			</view>
			<view class="address">
				<image src="/static/images/位置1 1.png" mode="aspectFit"></image>
				<view class="address_item">
					{{houselistData.addr}}
				</view>
			</view>
			<view class="phone" v-if="showPhone =='2'">
				<image src="/static/images/电话 1.png" mode="aspectFit"></image>
				<view class="phone_item">
					{{houselistData.userPhone}}
				</view>
			</view>
		</view>
		<view class="roomInfo">
			<view class="title">
				房间信息
			</view>
			<view class="typeArray">
				<view class="typeArray_item">
					<view class="item_title">
						{{houselistData.houseType}}
					</view>
					<view class="lableText">
						户型
					</view>
				</view>
				<view class="typeArray_item">
					<view class="item_title">
						{{houselistData.floor}}
					</view>
					<view class="lableText">
						楼层
					</view>
				</view>
				<view class="typeArray_item">
					<view class="item_title">
						{{houselistData.elevator=='YES'?'有':"无"}}
					</view>
					<view class="lableText">
						电梯
					</view>
				</view>
				<view class="typeArray_item">
					<view class="item_title">
						{{houseType[houselistData.payType]}}
					</view>
					<view class="lableText">
						支付
					</view>
				</view>
			</view>
		</view>
		<view class="roomIntroduction">
			<view class="roomIntroduction_item1">
				房间介绍
			</view>
			<view class="roomIntroduction_item2">
				{{houselistData.introduce}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useUserStore
	} from '@/stores/index';
	const userStore = useUserStore()
	import {
		houseData,
		collectHouse
	} from "@/api/room.js"
	import {
		toast
	} from '../../utils/common';
	const listBtn = () => {
        uni.navigateBack({
            delta: 1
        });
	}
	const id = ref('');
	const showPhone = ref('1');
	// 付款方式 PAY_ONE=付一押一，PAY_THREE=付三押一，PAY_SIX=半年付，PAY_ANNUAL=年付
	const houseType = ref({
		PAY_ONE: '付一押一',
		PAY_THREE: '付三押一',
		PAY_SIX: '半年付',
		PAY_ANNUAL: '年付',
	});
	// 类型 OFFICE=写字楼，NEAR_SUBWAY=临地铁，WHOLE_RENTAL=整租，COTENANCY=合租
	const type = ref({
		OFFICE: '写字楼',
		NEAR_SUBWAY: '临地铁',
		WHOLE_RENTAL: '整租',
		COTENANCY: '合租',
	});
	const houselistData = ref({});
	const bannerList = ref([]);
	// 初始化数据
	const initData = async () => {
		const res = await houseData(id.value);
		if (res.code == 200) {
			houselistData.value = res.data
			bannerList.value = res.data.images.split(',');
		}
	};
	onLoad((options) => {
		id.value = options.id;
    showPhone.value = options.showPhone;
		if (options.id) {
			initData() // houseData
		}
	});
	const handleCollect = () => {
		collectHouse({
			userId: userStore.user.id,
			houseId: houselistData.value.id,
			status: "YES"
		}).then(res => {
			if (res.code == 200) {
				houselistData.value.isCollect = true
			}
			res.msg && toast(res.msg)
		}).catch((res) => {
            res.msg && toast(res.msg)
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 750rpx;
		height: 2020rpx;
		gap: 16rpx;
		background-color: rgba(245, 245, 245, 1);
		z-index: 10;

		.image {
			position: absolute;
			top: 108rpx;
			left: 22rpx;
			width: 48rpx;
			height: 48rpx;
			z-index: 20;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.banner {
			width: 750.67rpx;
			height: 563rpx;
			margin-bottom: 16rpx;
			z-index: 50;

			image {
				width: 750.67rpx;
				height: 563rpx;

			}


		}

		.info {
			width: 686rpx;
			height: 292rpx;
			padding: 32rpx;
			gap: 24rpx;
			background-color: rgba(255, 255, 255, 1);
			margin-bottom: 16rpx;

			.title {
				display: flex;
				justify-content: space-between;
				width: 686rpx;
				height: 42rpx;
				margin-bottom: 24rpx;

				.title_item {

					height: 39rpx;
					font-size: 28rpx;
					color: rgba(51, 51, 51, 1);
				}

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.roomType {
				display: flex;
				height: 36rpx;
				font-size: 20rpx;
				margin-bottom: 24rpx;
				gap: 8rpx;

				.roomType_item1 {
					height: 28rpx;
					border-radius: 3rpx;
					padding: 4rpx 10rpx;
					gap: 107rpx;
                    text-align: center;
					color: rgba(79, 129, 240, 1);
					background-color: rgba(79, 129, 240, 0.1);
				}

				.roomType_item2 {
					width: 100rpx;
					height: 28rpx;
                    text-align: center;
					border-radius: 3rpx;
					padding: 4rpx 10rpx;
					gap: 107rpx;
					color: rgba(79, 129, 240, 1);
					background-color: rgba(79, 129, 240, 0.1);
				}
			}

			.price {
				display: flex;
				width: 686rpx;
				height: 45rpx;
				gap: 32rpx;
				margin-bottom: 24rpx;
				text-align: center;

				.price_item {
					height: 45rpx;
					color: red;

					.number {
						width: 100rpx;
						height: 45rpx;
						font-size: 32rpx;
					}

					text {
						width: 24rpx;
						height: 34rpx;
						font-size: 24rpx;
					}
				}
			}

			.address {
				display: flex;
				width: 305rpx;
				height: 37rpx;
				gap: 8rpx;
				margin-bottom: 24rpx;

				image {
					width: 37rpx;
					height: 37rpx;
				}

				.address_item {
					width: 260rpx;
					height: 36rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
				}
			}

			.phone {
				display: flex;
				width: 216rpx;
				height: 36rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				.phone_item {
					width: 172rpx;
					height: 36rpx;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
				}
			}
		}

		.roomInfo {
			width: 686rpx;
			height: 217rpx;
			padding: 32rpx;
			gap: 32rpx;
			background-color: rgba(255, 255, 255, 1);
			margin-bottom: 16rpx;

			.title {
				width: 112rpx;
				height: 39rpx;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}

			.typeArray {
				display: flex;
				justify-content: space-between;
				width: 606rpx;
				height: 82rpx;
				border-radius: 10rpx;
				padding: 32rpx 40rpx;
				text-align: center;
				margin-top: 32rpx;
				background-color: rgba(245, 245, 245, 1);

				.typeArray_item {
					display: flex;
					flex-direction: column;
					align-items: center;
					height: 82rpx;
					gap: 10rpx;

					.item_title {
						height: 40rpx;
						font-size: 32rpx;
						font-weight: 600;

					}

					.lableText {
						width: 52rpx;
						height: 32rpx;
						opacity: 67%;
						font-size: 26rpx;
					}
				}
			}
		}

		.roomIntroduction {
			width: 686rpx;
			height: 107rpx;
			padding: 32rpx;
			gap: 32rpx;
			background-color: rgba(255, 255, 255, 1);
			margin-bottom: 16rpx;

			.roomIntroduction_item1 {
				width: 112rpx;
				height: 39rpx;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 1);
			}

			.roomIntroduction_item2 {
				width: 321rpx;
				height: 36rpx;
				opacity: 60%;
				margin-top: 32rpx;
				font-size: 26rpx;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
</style>